<template>
  <div class="container">
    <el-tabs class="tab-container" v-model="tabActive">
      <el-tab-pane
        v-for="(item, index) in tabOptions"
        :key="index"
        :label="item.label"
        :name="item.name"
        style="height:500px;overflow: auto;width:300px"
      >
        <el-tree
          @check="nodeClick(item.name, $event)"
          :check-on-click-node="true"
          :highlight-current="true"
          :current-node-key="currentNodeKey"
          :data="item.name === 'org' ? orgList : roleList"
          :expand-on-click-node="false"
          ref="tree"
          :props="{ label: item.name === 'org' ? 'name' : 'label' }"
        ></el-tree>
      </el-tab-pane>
    </el-tabs>
    <div class="table-container">
      <el-input
        placeholder="请输入内容"
        class="user-table-search"
        v-model="userSearchInput"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="searchUser"></el-button>
        </template>
      </el-input>
      <c-table
        :columnData="userTables?.columnData || []"
        :table-data="tableData"
        :page-option="userPageOptions"
        :rowClick="props.rowClick"
      ></c-table>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Table from "@/components/Table.vue";
import { UserTables } from "@/components/bpmn/components/bpmnPropertiesPanel/tables";

export default {
  name: "userTaskAssign",
  components: {
    "c-table": Table,
  },
  props: {
    props: {
      type: Object,
    },
  },
  data() {
    return {
      tabActive: "org",
      selectedTabType: "",
      selectedNodeId: "",
      currentNodeKey: "",
      tableData: [],
      totalUserList: [], // 所有用户
      userTables: UserTables, // 用户列表配置项
      userPageOptions: {
        pageChange: this.pageChange,
      },
      tabOptions: [
        {
          label: "按机构查找",
          name: "org",
        },
        {
          label: "按角色查找",
          name: "role",
        },
      ],
      userSearchInput: "",
    };
  },
  computed: mapState({
    roleList: (state) => state.flowDesignStore.roleList,
    orgList: (state) => state.flowDesignStore.orgList,
    userList: (state) => state.flowDesignStore.userList,
  }),
  methods: {
    ...mapActions("flowDesignStore", [
      "getRoleList",
      "getUserList",
      "getOrgList",
    ]),
    // 点击机构、角色树，请求用户信息
    nodeClick(type, node) {
      this.userSearchInput = "";
      this.selectedTabType = type;
      this.selectedNodeId = node.id;
      this.requestUserList({
        [type + "Id"]: node.id,
        current: 1,
      });
    },
    pageChange(val) {
      let params;
      if (this.userSearchInput) {
        params = {
          current: val,
          cname: this.userSearchInput,
        };
      } else {
        params = { current: val };
        if (this.selectedTabType) {
          params[this.selectedTabType + "Id"] = this.selectedNodeId;
        }
      }
      this.requestUserList(params);
    },
    searchUser() {
      this.selectedTabType = this.selectedNodeId = null;
      this.requestUserList({
        cname: this.userSearchInput,
        current: 1,
      });
    },

    // 请求用户列表信息
    async requestUserList(params) {
      const rst = await this.getUserList(params);
      if (!rst.status) {
        this.$message({
          type: "warning",
          message: rst.message,
        });
      } else {
        Object.assign(this.userPageOptions, {
          total: rst.page.total,
          current: rst.page.current,
        });
        this.tableData = rst.data;
      }
    },
  },
  async mounted() {
    this.selectedTabType = this.selectedNodeId = null;
    this.userSearchInput = "";
    await this.requestUserList();
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;

  .tab-container {
    flex: 0 0 200px;
  }

  .table-container {
    flex: auto;
  }

  .tab-container {
    margin-right: 10px;
  }

  .table-container {
    .user-table-search {
      width: 180px;
      float: right;
    }
  }
}
</style>
